<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="assignVisible"
    size="1200px"
    :show-close="false"
    @close="handleClose"
  >
    <template #header>
      <div class="drawer-header">
        <div class="header-content">
          <span class="drawer-title">组织指派项目</span>
        </div>
        <el-button type="text" @click="handleClose" class="close-btn"
          >关闭</el-button
        >
      </div>
    </template>
    <div style="padding-left: 20px">指派项目</div>
    <div class="assign-container">
      <!-- 左侧面板 -->

      <div class="panel left-panel">
        <div class="panel-header">
          <el-checkbox v-model="leftSelectAll" @change="handleLeftSelectAll" />
          <span class="panel-title"
            >▼ {{ filteredLeftItems.length }}项可指派项目</span
          >
        </div>
        <div class="item-list">
          <div
            v-for="item in filteredLeftItems"
            :key="item.key"
            class="item-row"
            @click="toggleItem(item.key)"
          >
            <el-checkbox
              :model-value="selectedLeftItems.includes(item.key)"
              @change="toggleItem(item.key)"
            />
            <span class="item-label">{{ item.label }}</span>
          </div>
        </div>
      </div>

      <!-- 中间按钮区域 -->
      <div class="button-area">
        <el-button
          class="assign-btn"
          @click="assignSelected"
          :disabled="selectedLeftItems.length === 0"
        >
          > 指派
        </el-button>
        <el-button
          class="unassign-btn"
          @click="unassignSelected"
          :disabled="selectedRightItems.length === 0"
        >
          < 取消指派
        </el-button>
      </div>

      <!-- 右侧面板 -->
      <div class="panel right-panel">
        <div class="panel-header">
          <el-checkbox
            v-model="rightSelectAll"
            @change="handleRightSelectAll"
          />
          <span class="panel-title"
            >▼ {{ filteredRightItems.length }}项可指派项目</span
          >
        </div>
        <div class="item-list">
          <div
            v-for="item in filteredRightItems"
            :key="item.key"
            class="item-row"
            @click="toggleItem(item.key)"
          >
            <el-checkbox
              :model-value="selectedRightItems.includes(item.key)"
              @change="toggleItem(item.key)"
            />
            <span class="item-label">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button plain @click="handleClose" class="footer-btn">取消</el-button>
      <el-button type="primary" @click="handleAssign" class="footer-btn"
        >保存</el-button
      >
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, computed } from "vue";
import { departmentsPermissions } from "@/api";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";

const data = ref([
  { key: "1", label: "公共厕所" },
  { key: "2", label: "垃圾压缩站" },
  { key: "3", label: "可回收物点站场" },
  { key: "4", label: "环卫道班房" },
  { key: "5", label: "环卫停车场" },
  { key: "6", label: "系统管理" },
]);

const assignVisible = ref(false);
const assignValue = ref([]); // 已指派的项目
const selectedLeftItems = ref([]); // 左侧选中的项目
const selectedRightItems = ref([]); // 右侧选中的项目
const currentRow = ref(null);
const selectAll = ref(false);
const leftSelectAll = ref(false);
const rightSelectAll = ref(false);
const leftSearchText = ref("");
const rightSearchText = ref("");

const emit = defineEmits(["refresh"]);

defineOptions({
  name: "Assign",
});

// 计算属性
const filteredLeftItems = computed(() => {
  return data.value.filter(
    (item) =>
      !assignValue.value.includes(item.key) &&
      item.label.includes(leftSearchText.value)
  );
});

const filteredRightItems = computed(() => {
  return data.value.filter(
    (item) =>
      assignValue.value.includes(item.key) &&
      item.label.includes(rightSearchText.value)
  );
});

const openDrawer = (row) => {
  console.log(row, "row");
  currentRow.value = row;
  if (row.permissions) {
    assignValue.value = row.permissions.split(",");
  } else {
    assignValue.value = [];
  }
  assignVisible.value = true;
};

const handleClose = () => {
  assignValue.value = [];
  selectedLeftItems.value = [];
  selectedRightItems.value = [];
  selectAll.value = false;
  leftSelectAll.value = false;
  rightSelectAll.value = false;
  leftSearchText.value = "";
  rightSearchText.value = "";
  assignVisible.value = false;
};

const handleSelectAll = (checked) => {
  if (checked) {
    assignValue.value = data.value.map((item) => item.key);
  } else {
    assignValue.value = [];
  }
};

const handleLeftSelectAll = (checked) => {
  if (checked) {
    filteredLeftItems.value.forEach((item) => {
      if (!assignValue.value.includes(item.key)) {
        assignValue.value.push(item.key);
      }
    });
  } else {
    filteredLeftItems.value.forEach((item) => {
      const index = assignValue.value.indexOf(item.key);
      if (index > -1) {
        assignValue.value.splice(index, 1);
      }
    });
  }
};

const handleRightSelectAll = (checked) => {
  if (checked) {
    filteredRightItems.value.forEach((item) => {
      if (!assignValue.value.includes(item.key)) {
        assignValue.value.push(item.key);
      }
    });
  } else {
    filteredRightItems.value.forEach((item) => {
      const index = assignValue.value.indexOf(item.key);
      if (index > -1) {
        assignValue.value.splice(index, 1);
      }
    });
  }
};

const toggleItem = (key) => {
  // 如果是左侧项目，只更新选中状态，不移动到右侧
  if (filteredLeftItems.value.some((item) => item.key === key)) {
    const index = selectedLeftItems.value.indexOf(key);
    if (index > -1) {
      selectedLeftItems.value.splice(index, 1);
    } else {
      selectedLeftItems.value.push(key);
    }
  } else {
    // 如果是右侧项目，只更新选中状态，不移动到左侧
    const index = selectedRightItems.value.indexOf(key);
    if (index > -1) {
      selectedRightItems.value.splice(index, 1);
    } else {
      selectedRightItems.value.push(key);
    }
  }
};

const assignSelected = () => {
  // 将左侧选中的项目移到右侧
  selectedLeftItems.value.forEach((key) => {
    if (!assignValue.value.includes(key)) {
      assignValue.value.push(key);
    }
  });
  // 清空左侧选中状态
  selectedLeftItems.value = [];
};

const unassignSelected = () => {
  // 将右侧选中的项目移到左侧
  selectedRightItems.value.forEach((key) => {
    const index = assignValue.value.indexOf(key);
    if (index > -1) {
      assignValue.value.splice(index, 1);
    }
  });
  // 清空右侧选中状态
  selectedRightItems.value = [];
};

const handleAssign = () => {
  let o = {
    id: currentRow.value.id,
    permissions: assignValue.value.join(","),
  };
  departmentsPermissions(o).then((res) => {
    if (res.code == 0) {
      ElMessage.success("操作成功");
      handleClose();
      // 刷新列表
      emit("refresh");
    }
  });
};

defineExpose({
  openDrawer,
});
</script>

<style scoped lang="scss">
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  .header-content {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .close-btn {
    font-size: 16px;
    padding: 13px 16px;
    border: 1px solid #595757;
    color: #000000;
    background: #fff;
    border-radius: 4px;
  }
}

.assign-container {
  display: flex;
  gap: 20px;
  height: 500px;
  width: 100%;
  padding: 20px;
  background: #ffffff;

  .panel {
    flex: 1;
    border: 1px solid #595757;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;

    .panel-header {
      padding: 12px 16px;
      border-bottom: 1px solid #595757;
      display: flex;
      align-items: center;
      gap: 8px;

      .panel-title {
        font-size: 14px;
        color: #606266;
        font-weight: 500;
      }
    }

    .search-box {
      padding: 12px 16px;
    }

    .item-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;

      .item-row {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f5f7fa;
        }

        .item-label {
          margin-left: 8px;
          font-size: 14px;
          color: #333;
        }
      }
    }
  }

  .button-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 0 10px;
    flex-shrink: 0;

    .assign-btn,
    .unassign-btn {
      width: 80px;
      height: 36px;
      font-size: 14px;
      border-radius: 4px;
      margin-left: 0px !important;
      color: #000000 !important;
    }

    .assign-btn {
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;

      &:hover:not(:disabled) {
        background-color: #66b1ff;
        border-color: #66b1ff;
      }

      &:disabled {
        background-color: #c0c4cc;
        border-color: #c0c4cc;
        color: #fff;
      }
    }

    .unassign-btn {
      background-color: #909399;
      border-color: #909399;
      color: #fff;

      &:hover:not(:disabled) {
        background-color: #a6a9ad;
        border-color: #a6a9ad;
      }

      &:disabled {
        background-color: #c0c4cc;
        border-color: #c0c4cc;
        color: #fff;
      }
    }
  }
}

// 确保抽屉内容区域撑满全屏
:deep(.el-drawer__body) {
  padding: 0;
  height: calc(100vh - 60px);
  overflow: hidden;
}

:deep(.el-drawer) {
  width: 100% !important;
}

:deep(.el-drawer__wrapper) {
  width: 100% !important;
}

.footer-btn {
  padding: 13px 16px !important;
  border: 1px solid #595757 !important;
}

:deep(.el-checkbox__inner) {
  border-color: #c0c4cc !important;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #c0c4cc !important;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #c0c4cc !important;
}
</style>
